<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="题目" name="1">
        <div class="filter-container">
          <el-form
            :model="query"
            :inline="true"
            size="mini"
            label-position="right"
            label-width="70px"
          >
            <el-form-item label="抽检状态">
              <el-select v-model="query.status" size="mini" filterable>
                <el-option value="" label="全部" />
                <el-option value="0" label="抽检中" />
                <el-option value="1" label="合格" />
                <el-option value="2" label="不合格" />
              </el-select>
            </el-form-item>
            <el-form-item label="抽检人">
              <el-input
                v-model="query.rummagerName"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="抽检科目">
              <el-select
                v-model="query.subjectId"
                size="mini"
                filterable
                placeholder="请选择科目"
              >
                <el-option
                  v-for="subject in subjects"
                  :key="subject.id"
                  :label="subject.name"
                  :value="subject.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="抽检题目">
              <el-input
                v-model="query.questionName"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="批次号">
              <el-input
                v-model="query.batchNo"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="抽检时间">
              <el-date-picker
                v-model="query.time"
                type="daterange"
                value-format="timestamp"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="是否样本">
              <el-select v-model="query.isSample" size="mini" filterable>
                <el-option value="" label="全部" />
                <el-option value="1" label="是" />
                <el-option value="0" label="否" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否真题">
              <el-select
                v-model="query.isOfficialQuestion"
                size="mini"
                filterable
              >
                <el-option value="" label="全部" />
                <el-option value="1" label="是" />
                <el-option value="0" label="否" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                size="mini"
                icon="el-icon-search"
                type="primary"
                plain
                @click="getQuestionList()"
                >查询</el-button
              >
              <el-button
                size="mini"
                icon="el-icon-refresh-right"
                @click="cleanQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-table
            v-loading="listLoading"
            :data="list"
            row-key="id"
            border
            fit
            highlight-current-row
            style="width: 100%; margin-top: 10px"
          >
            <el-table-column align="center" label="批次号" width="160">
              <template slot-scope="scope">
                <span>{{ scope.row.batchNo }}</span>
              </template>
            </el-table-column>
            <el-table-column width="200px" align="center" label="抽检时间">
              <template slot-scope="scope">
                <span>{{ scope.row.ctime | parseTime }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="rummagerName" label="抽检人">
            </el-table-column>
            <el-table-column align="center" prop="subjectName" label="科目">
            </el-table-column>

            <el-table-column
              min-width="200px"
              align="center"
              :show-overflow-tooltip="true"
              label="题目"
            >
              <template slot-scope="scope">
                <span v-html="scope.row.questionTitle"></span>
              </template>
            </el-table-column>

            <el-table-column min-width="50" align="center" label="题目类型">
              <template slot-scope="scope">
                <span>{{ questionType[scope.row.type] }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="50" align="center" label="是否真题">
              <template slot-scope="scope">
                <span>{{ scope.row.isOfficialQuestion ? "是" : "否" }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="50" align="center" label="抽检状态">
              <template slot-scope="scope">
                <span>{{
                  scope.row.status == "0"
                    ? "抽检中"
                    : scope.row.status == "1"
                    ? "合格"
                    : "不合格"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="50" align="center" label="是否样本">
              <template slot-scope="scope">
                <span>{{ scope.row.isSample == "1" ? "是" : "否" }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="query.pageNo"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="query.pageSize"
            :total="query.total"
            layout="total, sizes, prev, pager, next, jumper"
            background
            class="page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="试卷" name="2">
        <div class="filter-container">
          <el-form
            :model="testQuery"
            :inline="true"
            size="mini"
            label-position="right"
            label-width="70px"
          >
            <el-form-item label="抽检状态">
              <el-select v-model="testQuery.status" size="mini" filterable>
                <el-option value="" label="全部" />
                <el-option value="0" label="抽检中" />
                <el-option value="1" label="合格" />
                <el-option value="2" label="不合格" />
              </el-select>
            </el-form-item>
            <el-form-item label="抽检人">
              <el-input
                v-model="testQuery.rummagerName"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="所属学科">
              <el-select v-model="testQuery.subjectType" clearable>
                <el-option
                  v-for="subjectType in subjectTypes"
                  :key="subjectType.id"
                  :label="subjectType.name"
                  :value="subjectType.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="试卷名称">
              <el-input
                v-model="testQuery.title"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="批次号">
              <el-input
                v-model="testQuery.batchNo"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="抽检时间">
              <el-date-picker
                v-model="testQuery.time"
                type="daterange"
                value-format="timestamp"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="试卷类型">
              <el-select v-model="testQuery.dataType" size="mini" filterable>
                <el-option value="" label="全部" />
                <el-option value="1" label="模拟卷" />
                <el-option value="2" label="真题卷" />
              </el-select>
            </el-form-item>
            <el-form-item label="考试类型">
              <el-select v-model="testQuery.exaType" clearable>
                <el-option
                  v-for="item in testType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                size="mini"
                icon="el-icon-search"
                type="primary"
                plain
                @click="getTestList()"
                >查询</el-button
              >
              <el-button
                size="mini"
                icon="el-icon-refresh-right"
                @click="cleanQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-table
            v-loading="listLoading"
            :data="testList"
            row-key="id"
            border
            fit
            highlight-current-row
            style="width: 100%; margin-top: 10px"
          >
            <el-table-column align="center" label="批次号" width="160">
              <template slot-scope="scope">
                <span>{{ scope.row.batchNo }}</span>
              </template>
            </el-table-column>
            <el-table-column width="200px" align="center" label="抽检时间">
              <template slot-scope="scope">
                <span>{{ scope.row.ctime | parseTime }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="rummagerName" label="抽检人">
            </el-table-column>
            <el-table-column align="center" prop="subjectType" label="学科">
            </el-table-column>

            <el-table-column
              min-width="200px"
              align="center"
              :show-overflow-tooltip="true"
              label="试卷名称"
            >
              <template slot-scope="scope">
                <span v-html="scope.row.title"></span>
              </template>
            </el-table-column>

            <el-table-column min-width="50" align="center" label="考试类型">
              <template slot-scope="scope">
                <span>{{ scope.row.exaType }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="50" align="center" label="试卷类型">
              <template slot-scope="scope">
                <span>{{ scope.row.dataType == 1 ? "模拟卷" : "真题卷" }}</span>
              </template>
            </el-table-column>
            <el-table-column min-width="50" align="center" label="抽检状态">
              <template slot-scope="scope">
                <span>{{
                  scope.row.status == "0"
                    ? "抽检中"
                    : scope.row.status == "1"
                    ? "合格"
                    : "不合格"
                }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="testQuery.pageNo"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="testQuery.pageSize"
            :total="testQuery.total"
            layout="total, sizes, prev, pager, next, jumper"
            background
            class="page"
            @size-change="handleTestSizeChange"
            @current-change="handleTestCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import waves from "@/directive/waves";
import { parseTime } from "@/utils/index";
import { getSpotCheck } from "@/api/question.js";
import SelectTeacher from "../test/components/SelectTeacher";
import { getSubjectList } from "@/api/subjectType.js";
import { getTeacher } from "@/api/teacher.js";
import { getSubjectTypeList } from "@/api/subjectType.js";
import { getTestTypeList } from "@/api/testType.js";
import { getTestSpotCheck } from "@/api/test.js";
export default {
  name: "QuestionList",
  directives: { waves },
  filters: {
    parseTime(time) {
      return parseTime(time);
    },
    tag(row) {
      if (row.status === 1) {
        return "success";
      }
      if (row.editStatus !== 1) {
        return "info";
      }
      if (row.checkStatus !== 1) {
        return "warning";
      }
      if (row.reviewStatus === 1) {
        return "success";
      }
      return "";
    },
    parseDecimalsToFractional(decimals) {
      var formatDecimals = decimals.toFixed(2);
      var denominator = 100; //初始化分母
      var numerator = formatDecimals * 100; //初始化分子
      var bigger = 0;
      function recursion() {
        bigger = denominator > numerator ? denominator : numerator;
        for (let i = bigger; i > 1; i--) {
          if (
            Number.isInteger(numerator / i) &&
            Number.isInteger(denominator / i)
          ) {
            numerator = numerator / i;
            denominator = denominator / i;
            recursion();
          }
        }
      }
      recursion();
      return `${numerator}/${denominator}`;
    },
    status(row) {
      if (row.status === 1) {
        return "上线";
      }
      if (row.status === 0) {
        return row.editPeople + "-编辑中";
      }
      if (row.status == 3) {
        return row.checkPeople + "-校验中";
      }
      if (row.status == 4) {
        return row.reviewPeople + "-审核中";
      }
      if (row.status == 5) {
        return "已审核";
      }
      return "下线";
    },
  },
  data() {
    return {
      questionType: {
        1: "单选题",
        2: "多选题",
        3: "判断题",
        4: "情景题",
        5: "简答题",
        6: "辨析题",
        7: "填空",
        8: "完形填空",
        9: "阅读理解",
        10: "背景题",
      },
      testList: [],
      listLoading: false,
      list: [],
      subjects: [],
      testType: [],
      subjectTypes: [],
      activeName: "1",
      testQuery: {
        pageNo: 1,
        pageSize: 20,
        total: 0,
        dataType: "",
        status: "",
      },
      query: {
        status: "",
        subjectId: "",
        isOfficialQuestion: "",
        isSample: "",
        rummagerName: "",
        time: [],
        editPeople: "",
        type: "",
        pageNo: 1,
        pageSize: 20,
        total: 0,
      },
      selectIds: [],
      teacher: [],
      question: {
        status: 0,
        id: 1,
        checkPeople: "",
      },
      isDel: true,
      sum: 0,
      subjectiveSum: 0,
      dialogFormVisible: false,
      form: {
        sum: 0,
        sampleSum: 0,
        subjectiveObjectiveRatio: 0,
      },
    };
  },
  computed: {
    showTitle: function () {
      return (
        JSON.stringify(this.query) !==
        JSON.stringify({
          subjectId: "",
          isOfficialQuestion: "",
          time: [],
          editPeople: "",
          type: "",
          pageNo: 1,
          pageSize: 20,
          total: 0,
        })
      );
    },
  },
  created() {
    this.getSubject();
    this.getTeacherList(0);
    this.getTestType();
    this.getSubjectType();
    this.getQuestionList();
    this.getTestList();
  },
  methods: {
    getTestList() {
      this.listLoading = true;
      getTestSpotCheck(this.testQuery).then((res) => {
        this.testList = res.data;
        this.testQuery.total = res.page.total;
        this.listLoading = false;
      });
    },
    getTestType() {
      getTestTypeList().then((res) => (this.testType = res.data));
    },
    getSubjectType() {
      getSubjectTypeList().then((res) => (this.subjectTypes = res.data));
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.isSample == "1") {
        return "warning-row";
      }
      return "success-row";
    },
    save() {
      let saveParam = Object.assign(this.query, this.form);
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      addSpotCheck(saveParam)
        .then((res) => {
          loading.close();
        })
        .catch((res) => {
          loading.close();
        });
    },
    decimalsToFractional(decimals) {
      var formatDecimals = decimals.toFixed(2);
      var denominator = 100; //初始化分母
      var numerator = formatDecimals * 100; //初始化分子
      var bigger = 0;
      function recursion() {
        bigger = denominator > numerator ? denominator : numerator;
        for (let i = bigger; i > 1; i--) {
          if (
            Number.isInteger(numerator / i) &&
            Number.isInteger(denominator / i)
          ) {
            numerator = numerator / i;
            denominator = denominator / i;
            recursion();
          }
        }
      }
      recursion();
      return `${numerator}/${denominator}`;
    },
    opensampleSetting() {
      this.dialogFormVisible = true;
      this.form.sum = this.sum > 1000 ? 1000 : this.sum;
      this.form.sampleSum = parseInt(this.form.sum * 0.1);
      if (this.form.sampleSum == 0) {
        this.form.sampleSum = 1;
      }
      this.form.subjectiveObjectiveRatio = (
        this.subjectiveSum /
        (this.sum - this.subjectiveSum)
      ).toFixed(1);
    },
    cleanQuery() {
      this.query = {
        status: "",
        subjectId: "",
        isOfficialQuestion: "",
        isSample: "",
        rummagerName: "",
        time: [],
        editPeople: "",
        type: "",
        pageNo: 1,
        pageSize: 20,
        total: 0,
      };
      this.testQuery = {
        pageNo: 1,
        pageSize: 20,
        total: 0,
        dataType: "",
        status: "",
      };
    },
    getTeacherList(status) {
      getTeacher(status).then((res) => {
        this.teacher = res.data.filter(
          (teacher) => this.$store.getters.name != teacher.name
        );
      });
    },
    handleSelectionChange(val) {
      this.selectIds = val.map((res) => res.id);
    },
    getSubject() {
      getSubjectList().then((res) => (this.subjects = res.data));
    },
    getQuestionList() {
      this.listLoading = true;
      this.query.processing = false;
      getSpotCheck(this.query).then((res) => {
        this.list = res.data;
        this.query.total = res.page.total;
        this.listLoading = false;
      });
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.pageNo = 1;
      this.getQuestionList();
    },
    handleCurrentChange(val) {
      this.query.pageNo = val;
      this.getQuestionList();
    },
    handleTestSizeChange(val) {
      this.testQuery.pageSize = val;
      this.testQuery.pageNo = 1;
      this.getTestList();
    },
    handleTestCurrentChange(val) {
      this.testQuery.pageNo = val;
      this.getTestList();
    },
  },
};
</script>

<style>
.el-table .success-row {
  color: #dcdfe6;
}
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}
</style>

<style scoped>
.page {
  margin-top: 10px;
}

.icon-star {
  margin-right: 2px;
}

.drag-handler {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.show-d {
  margin-top: 15px;
}
</style>
